<template>
  <div id="all">
    <el-card class="box-card">
      <div id="search_bar">
        <div class="span">
          服务编号：
          <div class="div_inner">
            <el-input v-model="serviceId" id="serviceId" placeholder="请输入关键字"></el-input>
          </div>
        </div>
        <div class="span">
          处理状态：
          <el-select v-model="handleStatus" placeholder="请选择" clearable @change="selectTrigger(handleStatus)">
            <el-option v-for="item in options" :key="item.handleStatus" :label="item.label"
                       :value="item.handleStatus"></el-option>
          </el-select>
        </div>
        <div class="span">
          <div class="block">
            <span class="demonstration">日期</span>
            <el-date-picker
              v-model="value1"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy/MM/dd"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </div>
        <div class="span">
          <el-button type="primary" size="small" @click="search" icon="el-icon-search">查询</el-button>
        </div>

        <div class="span">
          <el-button type="primary" size="small" @click="reset">重置</el-button>
        </div>
      </div>
      <div id="body">
        <h4 style="margin-left: 0px;float: left">退款列表</h4>
        <template>
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="serviceId" label="服务单号" align="center" width="200">
            </el-table-column>
            <el-table-column prop="orderId" label="订单号" align="center" width="200">
            </el-table-column>
            <el-table-column prop="handleTime" label="处理时间" align="center" width="200"
                             :formatter="this.$myFormat.formatDate">
            </el-table-column>
            <el-table-column prop="handleStatus" label="处理状态" align="center" width="200"
                             :formatter="this.$myFormat.handleStatus">
            </el-table-column>
            <el-table-column fixed="right" prop="manager" label="操作" align="center">
              <template slot-scope="scope">
                <el-button v-if="scope.row.handleStatus===0" type="text" size="mini">
                  操作
                </el-button>
                <el-button @click="handleClick(scope.row)" type="text" size="mini">
                  查看明细
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div class="block" style="margin-top: 20px;">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :page-sizes="[6, 12, 20]"
                       :page-size="6"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total=total>
        </el-pagination>
        <!--:current-page="currentPage" 当前页绑定-->
      </div>
    </el-card>
  </div>

</template>

<script>

  export default {
    name: 'ExchangeRequest',
    data() {
      return {
        tableData: [],
        pageNum: '1',
        pageSize: '6',
        serviceType: '2',
        total: 0,
        serviceId: '',
        orderId:'',
        queryStartTime: null,
        queryEndTime: null,
        input: '',
        options: [{
          handleStatus: '',
          label: '所有'
        }, {
          handleStatus: '0',
          label: '待处理'
        }, {
          handleStatus: '1',
          label: '处理中'
        }, {
          handleStatus: '2',
          label: '已完成'
        }, {
          handleStatus: '3',
          label: '已拒绝'
        }],
        handleStatus: '',
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
      }
    },
    components: {},
    created() {
      this.getList();
    },
    methods: {
      reset() {
        this.serviceId = '';
        this.orderId = '';
        this.handleStatus = '';
        this.getList();
      },
      getList() {
        this.axios.get('micro-mall-server/afterService/getList', {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            queryStartTime: this.queryStartTime,
            queryEndTime: this.queryEndTime,
            serviceType: this.serviceType,
            handleStatus: this.handleStatus,
            orderId:this.orderId,
            serviceId:this.serviceId
          }
        }).then(res => {
          console.log(res.data.data);
          this.tableData = res.data.data.data;
          this.total = res.data.data.total;
        })
      },
      //监听每页条数改变
      handleSizeChange(val) {
        this.pageSize = val;
        this.getList()
      },
      //监听当前页改变
      handleCurrentChange(val) {
        this.pageNum = val;
        this.getList()
      },
      selectTrigger(val) {
        this.handleStatus = val;
        this.getList()
      },
      search() {
        if (this.value1 !== '' && this.value1 !== null) {
          let obj = this.value1;
          let val = JSON.stringify(obj);
          val = val.replace(/\"/g, "");
          val = val.replace(/\[/g, "");
          val = val.replace(/\]/g, "");
          let str = val.split(',');
          this.queryStartTime = str[0];
          this.queryEndTime = str[1];
        }
        this.getList();
        this.queryStartTime = null;
        this.queryEndTime = null;
      }
    },
  }
</script>
<style scoped>

  .div_inner {
    position: relative;
    font-size: 14px;
    display: inline-block;
  }

  .span {
    display: inline-block;
    margin-left: 15px;
  }

  #search_bar {
    height: 90px;
    background-color: azure;
    line-height: 80px;
    margin-top: 10px;
  }

  #body {
    width: 100%;
  }
</style>
